<template>
    <div class="enter-container">
        <div style="margin-right: 150px; min-width: 300px">
            <img alt="" src="../../public/入口图片.png" style="width: 650px; position: absolute; top: 20%; right: 46%;"/>
        </div>
        <div style="color: black; font-size: 74px; font-family: '幼圆';font-weight: bold; position: absolute; top: 27%; right: 1%;">房屋租赁管理系统</div>
        <router-link to="/Login" style="position: absolute; bottom: 15%; right: 10%;">
            <el-button type="primary" style="width: 110px; height: 50px; font-size: 17px; font-family: 'Segoe UI'; border-radius: 10px;">进入网站</el-button>
        </router-link>
    </div>
    <div class="footer">
        ©Copyright 2025 UPC, Edu.
    </div>
</template>

<script>
export default {
  name: 'Enter'
};
</script>

<style scoped>
.enter-container {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        135deg,
        hsl(170, 80%, 70%),
        hsl(190, 80%, 70%),
        hsl(250, 80%, 70%),
        hsl(320, 80%, 70%),
        hsl(320, 80%, 70%),
        hsl(250, 80%, 70%),
        hsl(190, 80%, 70%),
        hsl(190, 80%, 70%),
        hsl(170, 80%, 70%)
    );
    background-size: 600%;
    animation: animation 15s linear infinite;
}

@keyframes animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

.footer {
    left: 0;
    bottom: 0;
    color: #fff;
    width: 100%;
    position: absolute;
    text-align: center;
    line-height: 30px;
    padding-bottom: 10px;
    text-shadow: #000 0.1em 0.1em 0.1em;
    font-size: 14px;
}

.footer a,
.footer span {
    color: #fff;
}
</style>